<style lang="scss">
@import "./uv.scss";
</style>
<template>
  <div style="background-color: #ffcbae;">
    <uv-datetime-picker ref="calendar" :maxDate="maxDate" v-model="form.month" mode="year-month" @confirm="confirm"></uv-datetime-picker>
    <u-my-layOut :showNavbar="false" :navbarOption="{ bgColor: 'rgba(255,255,255,1)', title: '邻事豆' }" :color="{ statusBarHeightColor: '#fff', bottomColor: '#FFCBAE' }">
      <template v-slot:header>
        <div class="pl30 pr30">
          <div class="p1757292903 mb30 fac jcsb">
            <div class="p1757292913"></div>
            <div class="p1757293093"></div>
            <div class="p1757293314" style="color: #ff5d5b">
              <div class="fz32 pt30" style="font-weight: 500">邻事豆余额</div>
              <div class="pb30 pt30" style="font-weight: 500; text-align: center; line-height: 1">
                <div style="font-size: 80rpx; display: inline">
                  {{ communityForm.beans }}
                </div>
                <div class="fz42" style="display: inline">豆</div>
              </div>
              <div class="fac jcc p1757295196">
                <button class="fz32 common-button p1757295023 pl0 pr0 ml0" style="color: #ffffff">
                  提现
                </button>
                <button class="fz32 common-button p1757295080 pl0 pr0 mr0" style="">
                  互转
                </button>
              </div>
            </div>
          </div>
          <div class="pt20" style="background-color: #f9f9f9; border-radius: 22rpx 22rpx 0 0">
            <div class="p1757322735">
              <uv-tabs @click="tabTap" :customStyle="{ height: '80rpx' }" :scrollable="false" :inactiveStyle="{ color: '#999' }" :activeStyle="{ color: '#333' }" lineColor="#333" border :list="list"></uv-tabs>
            </div>
          </div>
        </div>
      </template>
      <template v-slot:main>
        <div style=" height: 100%; overflow-y: auto">
          <scroll-view @refresherrestore="onRefresherRestore" @refresherrefresh="bindrefresherrefresh" @scrolltolower="onReachBottom" style="height: 100%" scroll-anchoring :refresher-triggered="isRefreshing" :refresher-enabled="false" scroll-y scroll-top="0">
            <div class="pl30 pr30" style="">
              <div class="  p30" style="height: 100%;background-color: #f9f9f9; border-radius: 0 0 22rpx 22rpx">
                <div class="fac pb20" @click="$refs.calendar.open()" style="background-color: #f9f9f9;font-weight: 700;font-size: 46rpx;">
                  <div v-if="formatter().YYYY != year">
                    {{ formatter().YYYY }}-
                  </div>
                  {{ formatter().MM }}
                  <div class="fz30" style="font-weight: 500; display: inline">
                    月
                  </div>
                </div>
                <div class="p1757379879 fac jcsb" v-for="(item, index) in tableData" :key="index">
                  <div>
                    <div class="fz30" style="font-weight: 500">
                      {{ item.remark }}
                    </div>
                    <div class="fz30 pt10" style="color: #999999">
                      {{ item.create_time }}
                    </div>
                  </div>
                  <div v-if="item.type == 2" class="fz40" style="color: #999999; font-weight: 700">
                    {{ item.amount_desc }}
                  </div>
                  <div v-if="item.type == 1" class="fz40" style="color: #ff6b35; font-weight: 700">
                    {{ item.amount_desc }}
                  </div>
                </div>
                <uv-empty v-if="tableData.length === 0 || isOnce" mode="data" />
                <uv-load-more v-if="tableData.length" fontSize="28rpx" :status="status" />
              </div>
            </div>
          </scroll-view>
        </div>
      </template>
      <template v-slot:footer>
        <div style="background-color: #ffcbae; width: 100%; height: 20rpx"></div>
      </template>
    </u-my-layOut>
  </div>
</template>

<script>
import commonMixin from './mixin/common.js';
import {
  personnelOrBeanNum,
  getLog
} from '@/api/community.js';
import myLayOutVue from './components/layOut.vue';
const d = new Date();
const year = d.getFullYear();
let month = d.getMonth() + 1;
month = month < 10 ? `0${month}` : month;
export default {
  components: {
    'u-my-layOut': myLayOutVue,
  },
  mixins: [commonMixin],
  data() {
    return {
      year: new Date().getFullYear(),
      defaultDateMultiple: [],
      maxDate: Number(new Date()),
      minDate: `${year}-01-01`,
      communityForm: {},
      form: {
        month: Number(new Date()),
        page: 1,
        limit: 10,
        type: 0,
      },
      current: 0,
      list: [{
        name: '全部明细',
        sort: 0,
      },
      {
        name: '收入',
        sort: 1,
      },
      {
        name: '支出',
        sort: 2,
      },
      ],
    };
  },
  onShow() {
    personnelOrBeanNum().then((res) => {
      if (res.code === 200) {
        this.communityForm = res.result;
      }
    });
    this.initPage();
  },
  methods: {
    tabTap(value) {
      this.current_page = 0;
      this.$set(this.form, 'page', 1);
      this.$set(this.form, 'type', value.sort);
      this.$nextTick(() => { });
      this.initPage(() => {
        this.tableData = [];
      });
    },
    formatter() {
      const d = new Date(this.form.month);
      const map = {
        YYYY: d.getFullYear(),
        MM: String(d.getMonth() + 1).padStart(2, '0'),
        DD: String(d.getDate()).padStart(2, '0'),
        HH: String(d.getHours()).padStart(2, '0'),
        mm: String(d.getMinutes()).padStart(2, '0'),
        ss: String(d.getSeconds()).padStart(2, '0'),
      };
      return map;
    },
    open() {
      this.$refs.calendar.open();
    },
    confirm(e) {
      this.current_page = 0;
      this.$set(this.form, 'page', 1);
      this.$nextTick(() => {
        this.initPage(() => {
          this.tableData = [];
        });
      });
    },
    viewDescTap() {
      uni.navigateTo({
        url: '/pages-community/neighborBean',
      });
    },
    initPage(cb = () => { }) {
      if (this.form.page == this.current_page) return;
      !this.isOnce &&
        uni.showLoading({
          title: '加载中',
          mask: true,
        });
      let form = JSON.parse(JSON.stringify(this.form));
      form.month = this.formatter().YYYY + '-' + this.formatter().MM;
      getLog(form)
        .then((res) => {
          this.isRefreshing = false;
          if (res.code === 200) {
            cb();
            !this.isOnce && uni.hideLoading();
            let data =
              res.result &&
              res.result.data &&
              JSON.parse(JSON.stringify(res.result.data));
            this.total = res.result.total;
            this.current_page = res.result.current_page;
            this.tableData = this.tableData.concat(data);
            this.isOnce = false;
            if (this.total <= this.tableData.length) this.status = 'nomore';
          }
        })
        .catch(() => {
          !this.isOnce && uni.hideLoading();
          this.isRefreshing = false;
          this.isOnce = false;
        });
    },
  },
};
</script>
<style>
page {
  color: #333333;
  background-color: #F7F8F8;
}
</style><style lang="scss" scoped>
@import "./common.scss";
.fz40 {
  font-size: 40rpx;
}

.p1757292903 {
  background: linear-gradient(150deg, #ff5a5a 0%, #feb47b 100%);
  box-shadow: 0rpx 10rpx 25rpx 0rpx rgba(255, 126, 95, 0.3);
  border-radius: 20rpx;
  overflow: hidden;
  position: relative;
  padding: 25rpx;

  .p1757292913 {
    position: absolute;
    width: 150rpx;
    height: 150rpx;
    background-color: #fe867a;
    border-radius: 50%;
    bottom: -30rpx;
    left: -30rpx;
    z-index: 1;
  }

  .p1757293093 {
    position: absolute;
    width: 205rpx;
    height: 205rpx;
    background-color: #feb390;
    border-radius: 50%;
    top: -50rpx;
    right: -50rpx;
    z-index: 1;
  }

  .p1757293314 {
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
    border-radius: 20rpx;
    width: 100%;
    height: 100%;
    z-index: 2;
  }

  .p1757295023,
  .p1757295080 {
    width: 50%;
    height: 91rpx;
    max-width: 270rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .p1757295023 {
    background: linear-gradient(163deg, #ff7e5f 0%, #feb47b 100%);
    box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(255, 126, 95, 0.4);
    margin-right: 15rpx;
  }

  .p1757295080 {
    background: #ffffff;
    box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(255, 126, 95, 0.4);
    margin-left: 15rpx;
  }
}

.p1757295196 {
  padding-left: 45rpx;
  padding-right: 45rpx;
  padding-bottom: 30rpx;
}

.p1757296779 {
  background: #f9f9f9;
  border-radius: 0 0 22rpx 22rpx;
}

.p1757379879 {
  background: #ffffff;
  margin-bottom: 20rpx;
  padding: 25rpx 20rpx;
}
</style>
